<template>
  <div class="icon-container" ref="svg">
    <div class="svg-tab active">
      <svg-icon icon-class="example" class="svg"></svg-icon>
      <span>example</span>
    </div>
    <div class="svg-tab">
      <svg-icon icon-class="documentation" class="svg"></svg-icon>
      <span>document</span>
    </div>
    <div class="svg-tab">
      <svg-icon icon-class="edit" class="svg"></svg-icon>
      <span>edit</span>
    </div>
    <div class="svg-tab">
      <svg-icon icon-class="email" class="svg"></svg-icon>
      <span>email</span>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.changeClass()
  },
  methods: {
    changeClass() {
      var that = this
      var svgItems = document.getElementsByClassName('svg-tab')
      svgItems.forEach((svgItem, activeIndex) => {
        svgItem.addEventListener('click', () => {
          svgItems.forEach(item => {
            item.classList.remove('active')
          })
          svgItem.classList.add('active')
          that.$refs.svg.style.setProperty('--active-index', activeIndex)
        })
      })
    }
  }
}
</script>

<style lang="scss">
  $width: 600px;
  $svg-width: $width/4;
  $height: 150px;
  $svg-height: $height - 10px;
  $over-width: $svg-width+40px;

  .icon-container {
    --active-index: 0;
    $active-index: var(--active-index);
    --svg-width: 140px;
    $active-width:calc(var(--svg-width) * var(--active-index));

    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    height: $height;
    background: #1e1e1e;
    margin: 20px auto;
    width: 600px;
    background: #fff;
    box-shadow: 0 0 5px 0 #ccc;
    border: 20px solid #fff;
    border-radius: 5% 5% 15% 15% / 15% 15% 50% 50%;
    overflow: hidden;

    // border-radius: 3% 8.8% 33% 33%;
    .svg-tab {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      width: $svg-width;
      height: $svg-height;
      z-index: 2;
      cursor: pointer;

      .svg{
        transition: 0.5s ease;
      }

      span {
        opacity: 0;
        font-size: 20px;
        color: #03b8ff;
        transition: 0.5s ease;
      }
    }

    .active {
      width: $over-width;

      .svg {
        transform: translateY(-10px);
      }

      span {
        opacity: 1;
      }
    }
    &::after {
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        width: $over-width;
        height: 100%;
        border-radius: 20px;
        background: #b4e9fe;
        transform: translateX($active-width);
        transition: 0.5s ease;
      }
  }
</style>
